<template>
  <div id="app">
    <drawer :show="drawerShow" :placement="placement" :showMode="showMode" @update:show="changeDrawerShow" @on-hide="onHide"  @on-show="onShow">
	    <div class="layout" slot="drawer" >
	    	<span>玩具公司</span>
	      	<ul class="nav">
				<li><router-link :to="'/'" :title="'首页'">首页</router-link></li>
				<li><router-link :to="'/about'" :title="'关于我们'">关于我们</router-link></li>
				<li><router-link :to="'/proList'" :title="'产品中心'">产品中心</router-link></li>
				<li><router-link :to="'/newsList'" :title="'新闻动态'">新闻动态</router-link></li>
				<li><router-link :to="'/zsjm'" :title="'招商加盟'">招商加盟</router-link></li>
				<li><router-link :to="'/contact'" :title="'联系我们'">联系我们</router-link></li>
			</ul>
	    </div>
    
			<div class="head">
				<div class="logo">
					<img src="./assets/xcd6.png" />
				</div>
				<div class="icon">
					<x-icon type="navicon" v-on:click="drawerToggle" class="icon-nav" size="35"></x-icon>
				</div>
			</div>
		
	  	<transition name="vux-pop-in">
	      <router-view class="child-view"></router-view>
	   	</transition> 
		</drawer>
	</div>
</template>

<script>
import {Drawer} from 'vux'
export default {
   data(){
     	return {
			placement: 'left',
			showMode: 'push',
			drawerShow: false,
     	}
   },
   methods: {
     	drawerToggle() {
			this.drawerShow=!this.drawerShow
     	},
     	onHide() {
			let wrap = this.$el.firstChild.firstChild;
    		if(this.placement == 'left'){
				wrap.classList.remove('actives');
			}else if(this.placement == 'right'){
				wrap.classList.remove('activer');
			}
     	},
     	changeDrawerShow(state) {
			this.drawerShow=state;
    	},
    	onShow() {
    		let wrap = this.$el.firstChild.firstChild;
    		if(this.placement == 'left'){
				wrap.classList.add('actives');
			}else if(this.placement == 'right'){
				wrap.classList.add('activer');
			}
		}
 	},
 	watch:{			//监听路由切换
    	$route(){
			this.drawerShow = false
    	}
  	},
 	components: { Drawer }
}
</script>

<style lang="less">
@import '~vux/src/styles/reset.less';

body,a,p,li,ul,h1,h2,h3,h4,h5,strong,div,img{
	font-size: 0.12rem; font-family: "微软雅黑",arial; margin: 0; padding: 0; border: none;
}
ul,li{
	list-style:none;
}

#app {
    height: 100%;
}
body {
    height: 100%;
}
html {
    height: 100%;
}
.wrap{
	overflow-x: hidden;
}
.nav{
	position:absolute; z-index:99; top:0.62rem; left: 0; width: 100%;
}
.nav a{
	display:block; height:0.42rem; border-bottom: 0.01rem solid #fff; line-height:0.42rem; padding-left: 0.2rem; color:#fff; 
}
.nav .router-link-exact-active{
	color:#fff; background: #f88e5d;
}
.layout{
   width: 2.3rem; padding-top: 0.1rem; overflow: hidden;
}
.layout span{
	font-size: 0.14rem; display: block; color: rgba(255,255,255,.8); text-align: center; line-height: 0.5rem;
}
.vux-drawer .actives{
  -webkit-transform:translate3d(2.3rem, 0px, 0px) !important; transform:translate3d(2.3rem, 0px, 0px) !important; 
}
.vux-drawer .activer{
  -webkit-transform:translate3d(-2.3rem, 0px, 0px) !important; transform:translate3d(-2.3rem, 0px, 0px) !important; 
}
.vux-drawer > .vux-drawer-content{
   background:#ffc3a7;
}

.head{
	height: 0.5rem;
}
.head .logo{
	float:left; width:2.76rem; background:#70E8A8;height:0.5rem; 
}
.head .logo img{
	width:1.76rem; margin:0.1rem;
}
.head .icon{
	float:left; width:0.44rem; height:0.5rem; background:#ffc3a7;
}
.head .icon svg{
	fill:#fff; margin:0.08rem 0.06rem; width:0.34rem; height:0.34rem; cursor:pointer;
}

input:focus,select:focus,textarea:focus{
	border: 0.01rem solid #66afe9 !important; -webkit-box-shadow:1px 1px 10px rgba(102,175,233,0.8);box-shadow:1px 1px 10px rgba(102,175,233,0.8);
}
.weui-grids:before,.weui-grid:before,.weui-grid:after,.weui-grids:after{
  border:0px !important;
}
.page{
    margin:0.2rem 0 0.6rem;color:#5a5a5a; overflow:hidden; text-align:center; clear: both;
}
.page .num{
    border:0.01rem solid #D5D5D5; margin:0 0.02rem; padding:0 0.03rem; line-height:0.18rem; height:0.18rem;
}
.page a{ 
    color:#5a5a5a;
}
.page .active{
    color:#D00; border:0 !important;
}
.page a:hover{
    color:#0064d4;
}


/* 路由切换动画 */
.child-view {  
  width: 100%; height: 100%; -webkit-transition: all 0.5s cubic-bezier(.55,0,.1,1);  transition: all .5s cubic-bezier(.55,0,.1,1);  
}  
.vux-pop-out-enter-active,
.vux-pop-out-leave-active,
.vux-pop-in-enter-active,
.vux-pop-in-leave-active {
  will-change: transform; transition: all 0.5s; height: 100%; position: absolute;  backface-visibility: hidden;  perspective: 1000;
}
.vux-pop-out-enter {
  opacity: 0; transform: translate3d(-100%, 0, 0);
}
.vux-pop-out-leave-active {
  opacity: 0; transform: translate3d(100%, 0, 0);
}
.vux-pop-in-enter {
  opacity: 0; transform: translate3d(100%, 0, 0);
}
.vux-pop-in-leave-active {
  opacity: 0; transform: translate3d(-100%, 0, 0);
}


</style>
